<template>
  <div>
    <el-dialog
      title="附件"
      :visible.sync="show"
      :modal-append-to-body="false"
      append-to-body
      :modal="model"
      width="500px"
      :close-on-click-modal="false"
      :before-close="close"
    > 
      <label class="label" v-if="!uploadDisabled">
        <div class="border">{{tipText}}</div>
        <upload-single-file
          :configName="configName"
          :limit="limit"
          :fileAccept="fileAccept"
          @upload-success="uploadSuccess"
          size="small"
        ></upload-single-file>
      </label>
      <el-row class="list">
        <el-col :span="24" class="item-file" v-for="(item, i) in list" :key="i">
          <div class="file" @click="download(item)">{{ item ? item.split("/")[item.split("/").length - 1].slice(13) : "" }}</div>
          <div class="btns">
            <el-button
              v-if="item.indexOf('.pdf') != -1 || item.indexOf('.jpg') != -1 || item.indexOf('.jpeg') != -1 || item.indexOf('.png') != -1 || item.indexOf('.gif') != -1"
              type="text"
              size="mini"
              @click="fileOpen(item)"
            >查看</el-button>
            <el-button
              v-if="!uploadDisabled"
              type="text"
              size="mini"
              @click="delFile(i)"
            >删除</el-button>
          </div>
        </el-col>
      </el-row>
      <el-row style="text-align: right; margin-top: 10px" v-if="!uploadDisabled">
        <el-button size="small" type="primary" @click="comfirm">保 存</el-button>
        <el-button size="small" @click="close">关 闭</el-button>
      </el-row>
    </el-dialog>
    <img-dialog ref="imgDialog" :url="imgUrl"></img-dialog>
  </div>
</template>
<script>
import uploadSingleFile from '@/components/UploadSingleFile/index';
import imgDialog from './imgDialog.vue'
export default {
  components: {
    uploadSingleFile,
    imgDialog
  },
  props: {
    configName: {
      type: String,
      default: '模块名称'
    },
    fileAccept:  {  // 接受文件类型，'.doc,.docx,.png'
      type: String,
      default: ''
    },
    uploadDisabled: { // 上传按钮禁用状态
      type: Boolean,
      default: false
    },
    fileList: { // 回显上传的文件
      type: String,
      default: ''
    },
    limit: {  // 文件数量限制
      type: Number,
      default: 1
    },
    model: {  // 是否显示model，用于多层dialog嵌套使用dialog被model遮挡
      type: Boolean,
      default: true
    },
    tipText:{
      type: String,
      default: ''
    }
  },
  data() {
    return {
      show: false,
      // 上传的文件列表
      list: [],
      // 图片url
      imgUrl: ''
    }
  },
  methods: {
    // 打开弹窗
    open() {
      this.show = true;
      this.list = this.fileList ? this.fileList.split('|') : [];
    },
    // 关闭弹窗
    close() {
      this.show = false;
    },
    // 保存按钮
    comfirm() {
      this.$emit('saveFile', this.list);
      this.close();
    },
    // 文件上传成功
    uploadSuccess(file) {
      console.log(file)
      this.list.push(file)
    },
    // 文件删除按钮
    delFile(index) {
      this.list.splice(index, 1)
    },
    // 在线打开文件
    fileOpen(path){
      if(path.indexOf('.pdf') != -1){
        window.open('/pdf/web/viewer.html?file=/zy-api/' + this.$utils.cutOutURLNotDomainName(path))
      }else{
        this.imgUrl = path;
        this.$refs.imgDialog.open()
      }
    },
    // 下载文件
    download(url) {
      this.$utils.downloadFile(url)
    }
  }
}
</script>
<style scoped lang="scss">
.label {
  display: flex;
  justify-content: space-between;
  .border{
    width:  calc( 100% - 60px );
    height: 33px;
    line-height: 33px;
    font-weight: normal;
    color: #CCCCCC;
  }
}
.list{
  height: 250px;
  overflow: auto;
  padding-top: 10px;
}
.item-file{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 35px;
  .file{
    max-width: calc( 100% - 100px );
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    cursor: pointer;
    &:hover{
      color: #1890ff;
      text-decoration: underline;
    }
  }
}
</style>